<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="1000px" class="bb">
        <img src="https://www.fuint.cn/fuintAdmin/static/img/login-bg.fc917d2c.png" alt="" class="bo">
        <div class="left-box">
          <h1>fuint会员营销管理系统</h1>
          <em>欢迎使用 fuint会员营销管理系统，您的卡券、储值卡、计次卡等会员营销小管家！</em>
        </div>
      </el-aside>
      <el-main class="form2" >
        <el-tabs type="border-card" tab-position="bottom">
    <el-tab-pane label="登录" >
      <div class="cc"></div>
      <div class="form">
          <!-- ref="ruleFormRef" 表单验证 -->
          <el-form :label-position="labelPosition" ref="ruleFormRef" :rules="rules" :model=" ruleForm " >
            <h2><img
                src=""
                alt="" style="width: 30px; height: 30px; padding-right: 10px;">fuint会员营销管理系统
            </h2>
            <el-form-item label="" prop="uname">
              <el-input placeholder="请输入用户名" v-model="ruleForm.uname" size="large" :prefix-icon="Avatar" clearable="true"></el-input>
            </el-form-item>
            <el-form-item label="" prop="password">
              <el-input placeholder="请输入密码" v-model="ruleForm.password" size="large" :prefix-icon="Lock" />
            </el-form-item>
            <el-row :gutter="20">
              <el-col :span="12">
            <el-form-item label="" prop="balance">
              <el-input placeholder="请输入验证码"  size="large" :prefix-icon="Position"  v-model="ruleForm.balance"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label=""  >
              <el-input size="large" placeholder="点击获取验证"  v-model="ruleForm.balance" @click="open" class="zheng"/>
            </el-form-item>
          </el-col>
          </el-row>
          <el-checkbox label="记住密码" size="large" fill="#409EFF" />
            <el-button type="primary"  @click="submitForm(ruleFormRef)" color="#00acac"  style="width: 100%; height:50px;">立即登录</el-button>
          </el-form>
          <p>Copyright © 2020-2023 <a href="https://www.fuint.cn">fuint.cn</a> All Rights Reserved.</p>
        </div>
    </el-tab-pane>
    <!-- 注册 -->
    <el-tab-pane label="注册">
      <div class="cc"></div>
      <div class="form">
          <!-- ref="ruleFormRef" 表单验证 -->
          <el-form :label-position="labelPosition"  :rules="rules" :model=" zhuForm " >
            <h2><img
                src=""
                alt="" style="width: 30px; height: 30px; padding-right: 10px;">fuint会员营销管理系统
            </h2>
            <el-form-item label="" prop="uname">
              <el-input placeholder="请输入用户名" v-model="zhuForm.uname" size="large" :prefix-icon="Avatar" clearable="true"></el-input>
            </el-form-item>
            <el-form-item label="" prop="password">
              <el-input placeholder="请输入密码" v-model="zhuForm.password" size="large" :prefix-icon="Lock" />
            </el-form-item>
            <el-form-item label="" prop="sex">
              <el-input placeholder="请输入手机号"  size="large" :prefix-icon="Position"  v-model="zhuForm.sex"/>
            </el-form-item>
            <el-button type="primary"  @click="handleAdd" color="#00acac"  style="width: 100%; height:50px;">立即注册</el-button>
          </el-form>
          <p>Copyright © 2020-2023 <a href="https://www.fuint.cn">fuint.cn</a> All Rights Reserved.</p>
        </div>
    </el-tab-pane>
  </el-tabs>
        <!-- 登录 -->
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { userLogin, adduser } from '@/api/user';
import { useRouter } from 'vue-router';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { nanoid } from 'nanoid';
// 图标
import { Avatar, Lock, Position } from '@element-plus/icons-vue';

const ruleFormRef = ref<FormInstance>();
const labelPosition = ref('right');
// 类型的约束
interface ruleform {
  uname: string
  password: string
  // 手机号
  balance: string
  sex: string
}
// 登录
const ruleForm = reactive<ruleform>({
  uname: '',
  password: '',
  // 手机号
  balance: '',
  sex: '',
});
// 注册
const zhuForm = reactive<ruleform>({
  uname: '',
  password: '',
  // 手机号
  balance: '',
  sex: '',
});
// 表单的验证
const rules = reactive<FormRules<ruleform>>({
  uname: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  balance: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
});
const router = useRouter();
// 登录验证
const login = async () => {
  const res = await userLogin({
    uname: ruleForm.uname,
    password: ruleForm.password,
  });
  // 判断是否我201
  const { status } = res;
  try {
  if (status === 201) {
    ElMessage("登录成功");
    // 获取token
  window.localStorage.setItem('token', res.data.accessToken);
  // 替换按钮
  router.replace('./index');
  }
} catch (error) {
  ElMessage.warning("失败");
}
};
//提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 验证规则
      login();
      console.log('成功');
    } else {
      console.log('失败', fields);
    }
    return true;
  });
};
// 随机数
const open = () => {
      const uid = nanoid(4);
      ruleForm.balance = `${uid}`;
    };
    // 注册验证
    const handleAdd = async () => {
  try {
    // :model=" zhuForm "
    const res = await adduser(zhuForm);
    console.log('res', res);
    const { status } = res;
    if (status === 201) {
      ElMessage.success('添加成功');
      //   this.getList();
    } else {
      ElMessage.warning('添加失败');
    }
  } catch (e) {
    ElMessage.warning('请按要求检查表单内容');
  }
};
</script>

<style>
/* 输入框的边框颜色 */
.el-input__wrapper.is-focus{
  border-color:1px #00acac;
}
/* 验证 */
.yan {
  width: 100px;
  height: 40px;
  background-color:#707070;
}
.bo {
  width: 1000px;
  height: 100%;
  background-color: blue;
}

.common-layout {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.bb {
  position: relative;
  top: 0;
}

.left-box {
  width: 100%;
  height: 180px;
  position: absolute;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.627);
  color: white;
  line-height: 50px;
  text-indent: 50px;
}

h1 {
  font-size: 30px;
  padding-top: 30px;
}

/* 表单 */
.form2 {
  position: relative;
}
em{
  padding-left: 50px;
  font-style: normal;
}

.form {
  width: 80%;
  height: 600px;
  /* border: 1px solid gold; */
  position: absolute;
  top: 100px;
  left: 50px;
}

h2 {
  font-weight: 500;
  font-size: 24px;
  color: #707070;
  padding: 20px 0 20px 0;
}
/* 选中 */
.el-checkbox__input.is-checked+.el-checkbox__label{
  color: #00acac;
}
.el-checkbox__input.is-checked .el-checkbox__inner{
  background-color: #00acac;
  border: #00acac;
}
.el-checkbox__inner:hover{
  border-color: #00acac;
}
p{
  font-size: 12px;
  padding-top: 20px;
  color: #707070;
  text-align: center;
}
a{
  color: brown;
}
.cc{
  height: 450px;
}
/* // 选项卡的设置 */
.el-tabs--border-card>.el-tabs__content{
  padding: 0;
  border: none;
}
.el-tabs--border-card{
  border: none;
}
.el-tabs__nav-scroll{
  background-color: none;
}
.el-tabs__nav-wrap{
  overflow:none;
}
.el-tabs--bottom.el-tabs--border-card .el-tabs__header.is-bottom{
  border:none;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item{
  border: none;
}
/* 登录的背景颜色 */
.el-tabs--border-card>.el-tabs__header{
  background-color:white;
}
/* 登录的边框线 */
.el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom:not(.is-active){
  border: none;
}
/* 登录点击后的颜色 */
.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
  color: #00acac;
}
/* 登录的字体颜色 */
.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover{
  color: #00acac;
}
</style>
